<!-- eslint-disable @typescript-eslint/no-unused-vars -->
<!-- eslint-disable prettier/prettier -->
<template>
  <div>
    <div class="card content-box">
      <span class="text">临时任务分配</span>
      <el-divider></el-divider>
      <!--搜索-->
      <div style="width: 100%; display: flex; justify-content: start">
        <el-button type="primary" @click="one = true">添加任务</el-button>
      </div>
      <br />
      <div style="width: 100%; display: flex; justify-content: start">
        <div style="width: 50%; display: flex; flex-direction: row; align-items: center">
          <div style="width: 25%">
            <el-select v-model="searchMapId" placeholder="选择路线" clearable>
              <el-option v-for="map in AllMap" :key="map.mapId" :label="map.mapName" :value="map.mapId"></el-option>
            </el-select>
          </div>
          <div style="width: 20px"></div>
          <div style="width: 25%">
            <el-select
              v-model="searchClassId"
              placeholder="选择班组"
              clearable
              @change="selectPointClassChange(searchClassId)"
              @clear="handleClear"
            >
              <el-option v-for="clas in AllClass" :key="clas.classId" :label="clas.className" :value="clas.classId"></el-option>
            </el-select>
          </div>
          <div style="width: 20px"></div>
          <div style="width: 25%">
            <el-select v-model="searchMemberId" placeholder="选择成员" :disabled="!searchClassId" clearable>
              <el-option
                v-for="member in classMembers"
                :key="member.userId"
                :value="member.userId"
                :label="member.realName"
              ></el-option>
            </el-select>
          </div>
          <div style="width: 20px"></div>
          <el-date-picker
            v-model="searchTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            placeholder="选择时间"
            value-format="YYYY-MM-DD"
            :suffix-icon="Calendar"
            clearable
          >
          </el-date-picker>
          <div style="width: 20px"></div>
          <div style="width: 50px">
            <el-button type="primary" @click="searchTask">搜索</el-button>
          </div>
        </div>
      </div>
      <br />
      <!--展示机构列表-->
      <el-table
        :data="paginatedTasks"
        border
        class="custom-table"
        style="width: 100%"
        :default-sort="{ prop: 'inspectionWork.inspectionStartTime', order: 'descending' }"
      >
        <el-table-column type="selection" :selectable="selected" width="55" />
        <el-table-column label="序号" width="100" type="index"> </el-table-column>
        <el-table-column prop="inspectionWork.inspectionStartTime" label="开始时间" sortable>
          <template #default="scope">
            <text>{{ formatDate(scope.row.inspectionWork.inspectionStartTime) }}</text>
          </template>
        </el-table-column>
        <el-table-column label="任务名称">
          <template #default="scope">
            <text>{{ scope.row.inspectionWork.inspectionWorkName }}</text>
          </template>
        </el-table-column>
        <el-table-column label="任务模板">
          <template #default="scope">
            <text>{{ scope.row.inspection.inspectionName }}</text>
          </template>
        </el-table-column>
        <el-table-column label="路线">
          <template #default="scope">
            <text>{{ scope.row.map.mapName }}</text>
          </template>
        </el-table-column>
        <!--        <el-table-column label="创建者">-->
        <!--          <template #default="scope">-->
        <!--            <text>{{ getUserInfo(scope.row.inspection.inspectionUserId) }}</text>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column label="任务状态">
          <template #default="scope">
            <el-tag :type="formatInspectionWorkTagType(scope.row.inspectionWork.inspectionWorkStatus)" size="large">
              {{ formatInspectionWorkStatus(scope.row.inspectionWork.inspectionWorkStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <!--#default="{ row }"-->
          <template #default="{ row }">
            <el-button type="primary" @click="showTask(row)" size="small">查看</el-button>
            <el-button type="warning" @click="showEditTask(row)" size="small">编辑</el-button>
            <el-button type="danger" @click="delTask(row)" size="small">删除</el-button>
          </template>
        </el-table-column>
        <template #empty>
          <el-empty description="暂无任务" />
        </template>
      </el-table>
      <br />
      <!--分页-->
      <div style="width: 100%; display: flex; justify-content: end">
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :pager-count="7"
          layout="jumper, prev, pager, next, total"
          :total="totalItems"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!--任务详情抽屉-->

    <el-drawer v-model="show_task" title="任务详情" size="35%">
      <div>
        <!--任务信息-->
        <el-card style="max-width: 100%">
          <template #header>{{ task.inspectionWork.inspectionWorkName }}</template>
          <div class="common-layout">
            <el-container>
              <el-main>
                <el-descriptions title="" :column="1" border>
                  <el-descriptions-item label="任务名称" align="center">
                    {{ task.inspectionWork.inspectionWorkName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="巡检线路" align="center">
                    {{ task.map.mapName }}
                  </el-descriptions-item>
                  <!--                  <el-descriptions-item label="创建者" align="center">-->
                  <!--                    {{ getUserInfo(task.inspection.inspectionUserId) }}-->
                  <!--                  </el-descriptions-item>-->
                  <el-descriptions-item label="任务时限" align="center">
                    <span>{{ task.inspectionWork.inspectionLimitTime }}小时</span>
                  </el-descriptions-item>
                  <el-descriptions-item label="任务状态" align="center">
                    <el-tag :type="formatInspectionWorkTagType(task.inspectionWork.inspectionWorkStatus)" size="large">
                      {{ formatInspectionWorkStatus(task.inspectionWork.inspectionWorkStatus) }}
                    </el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item label="任务开始时间" align="center">
                    <span>{{ formatDate(task.inspectionWork.inspectionStartTime) }}</span>
                  </el-descriptions-item>
                  <el-descriptions-item v-if="task.inspectionWork.inspectionWorkStatus === 2" label="任务完成时间" align="center">
                    <span>{{ formatDate(task.inspectionWork.inspectionEndTime) }}</span>
                  </el-descriptions-item>
                </el-descriptions>
              </el-main>
            </el-container>
          </div>
        </el-card>
        <br />
        <br />
        <el-card>
          <template #header>
            <span>任务点位详情</span>
          </template>
          <el-table :data="taskDetails" class="custom-table" style="width: 100%" border>
            <el-table-column type="expand">
              <template #default="props">
                <el-descriptions :column="1" border size="small">
                  <el-descriptions-item label="点位名称" align="center" label-class-name="my-label">
                    {{ props.row.mapDetailDesc }}
                  </el-descriptions-item>
                  <el-descriptions-item label="点位任务名称" align="center" label-class-name="my-label">
                    {{ props.row.inspectionDataName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="点位任务描述" align="center" label-class-name="my-label">
                    {{ props.row.inspectionDataDesc }}
                  </el-descriptions-item>
                  <el-descriptions-item label="机组" align="center" label-class-name="my-label">
                    {{ props.row.unitName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="执行班组" align="center" label-class-name="my-label">
                    {{ getClassInfo(props.row.inspectionDetailClassId) }}
                  </el-descriptions-item>
                  <el-descriptions-item label="负责人" align="center" label-class-name="my-label">
                    {{ getUserInfo(props.row.inspectionDetailUserId) }}
                  </el-descriptions-item>
                  <el-descriptions-item label="备注" align="center" label-class-name="my-label">
                    {{ props.row.inspectionDetailNote ? props.row.inspectionDetailNote : "无" }}
                  </el-descriptions-item>
                  <el-descriptions-item label="巡检数据" align="center" label-class-name="my-label">
                    <el-button
                      link
                      type="primary"
                      size="small"
                      @click="showValue(props.row)"
                      v-if="props.row.inspectionValueVos.length >= 1"
                    >
                      查看
                    </el-button>
                    <span v-else>暂无</span>
                  </el-descriptions-item>
                </el-descriptions>
              </template>
            </el-table-column>
            <el-table-column label="序号" type="index"> </el-table-column>
            <el-table-column label="任务ID" prop="inspectionDetailId"></el-table-column>
            <el-table-column label="点位名称" prop="mapDetailDesc"></el-table-column>
            <el-table-column label="点位任务名称" prop="inspectionDataName"></el-table-column>
            <el-table-column label="任务状态">
              <template #default="scope">
                <el-tag :type="formatInspectionDetailTagType(scope.row.inspectionDetailStatus)" size="large">
                  {{ formatInspectionDetailStatus(scope.row.inspectionDetailStatus) }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </el-drawer>

    <inspectionValue v-model:dialogFlag="showValueDetail" :inspection-values="inspectionValues"></inspectionValue>

    <el-drawer v-model="edit_task" title="编辑任务信息" size="35%">
      <div>
        <!--任务信息-->
        <el-card style="max-width: 100%">
          <template #header>
            <div style="display: flex; justify-content: space-between; width: 100%; align-items: center">
              <span>{{ editForm.OldInspectionWorkName }}</span>
              <el-button link @click="confirmEdit" type="danger" size="large">修改</el-button>
            </div>
          </template>
          <el-form v-model="editForm" label-position="right" style="margin-left: 10%">
            <el-form-item label="任务名称" prop="inspectionWorkName">
              <el-input v-model="editForm.inspectionWorkName" style="width: 60%"></el-input>
            </el-form-item>
            <el-form-item label="开始时间" prop="inspectionStartTime">
              <el-date-picker
                type="datetime"
                value-format="YYYY-MM-DD HH:mm:ss"
                time-format="HH:mm"
                v-model="editForm.inspectionStartTime"
                placeholder="开始时间"
                :arrow-control="true"
                :suffix-icon="Calendar"
                :default-time="now"
                :disabled-date="disabledDate"
                :disabled-hours="disabledHours"
                :disabled-minutes="disabledMinutes"
                style="width: 60%"
                :show-now="false"
              />
            </el-form-item>
            <el-form-item label="任务时限" prop="inspectionLimitTime">
              <el-input v-model="editForm.inspectionLimitTime" style="width: 20%"></el-input>
              <span>&nbsp;小时</span>
            </el-form-item>
          </el-form>
        </el-card>
        <br />
        <br />
        <el-card>
          <template #header>
            <div style="display: flex; justify-content: space-between; width: 100%; align-items: center">
              <span>任务点位详情</span>
              <el-button link @click="showEditDetail" type="primary" size="large">编辑</el-button>
            </div>
          </template>
          <el-table :data="editDetails" class="custom-table" style="width: 100%" border>
            <el-table-column label="序号" type="index"> </el-table-column>
            <el-table-column label="点位名称" prop="mapDetailDesc"></el-table-column>
            <el-table-column label="点位任务名" prop="inspectionDataName"></el-table-column>
            <el-table-column label="任务描述" prop="inspectionDataDesc"></el-table-column>
            <el-table-column label="班组">
              <template #default="{ row }">
                {{ getClassInfo(row.inspectionDetailClass) }}
              </template>
            </el-table-column>
            <el-table-column label="负责人">
              <template #default="{ row }">
                {{ getUserInfo(row.inspectionDetailUser) }}
              </template>
            </el-table-column>
          </el-table>
          <br />
        </el-card>
      </div>
    </el-drawer>

    <el-dialog v-model="edit_details_dialog" title="点位信息编辑" width="70%">
      <div>
        <el-table :data="editDetails2" style="width: 100%" border>
          <el-table-column prop="mapDetailDesc" label="点位名"></el-table-column>
          <el-table-column prop="inspectionDataName" label="点位任务名称">
            <template #default="scope">
              <el-input v-model="scope.row.inspectionDataName" placeholder="点位任务名称"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="inspectionDataDesc" label="任务描述">
            <template #default="scope">
              <el-input v-model="scope.row.inspectionDataDesc" placeholder="点位任务描述"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="inspectionGroupId" label="数据组">
            <template #default="scope">
              <el-select v-model="scope.row.inspectionGroupId" placeholder="选择数据组">
                <el-option
                  v-for="item in datas"
                  :key="item.inspectionGroupId"
                  :label="item.inspectionGroupName"
                  :value="item.inspectionGroupId"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="执行班组">
            <template #default="scope">
              <el-select
                v-model="scope.row.inspectionDetailClass"
                placeholder="选择班组"
                @change="scope.row.inspectionDetailUser = null"
              >
                <el-option
                  v-for="clas in workerListByClass"
                  :key="clas.classId"
                  :label="clas.className"
                  :value="clas.classId"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="负责人">
            <template #default="scope">
              <el-select
                v-model="scope.row.inspectionDetailUser"
                placeholder="选择组员"
                :disabled="!scope.row.inspectionDetailClass"
              >
                <el-option
                  v-for="item in getWorkerList(scope.row.inspectionDetailClass)"
                  :key="item.userId"
                  :label="item.realName"
                  :value="item.userId"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="danger" @click="ConfirmEditDetail"> 确认修改 </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 添加任务弹窗 -->
    <!--三级窗口-->
    <el-dialog v-model="one" title="任务创建" width="70%">
      <!--编辑模式-->
      <el-form :model="taskForm" label-width="130px" style="padding-right: 30px" v-if="one">
        <el-form-item>
          <el-radio-group v-model="withTemplate">
            <el-radio-button label="使用现有模板" value="1" />
            <el-radio-button label="不使用现有模板" value="0" />
          </el-radio-group>
          <span style="display: flex; align-items: center; color: grey; margin-left: 15px"><el-icon style="margin-right: 5px"><Warning /></el-icon>不使用现有模板将会创建新的任务模板</span>
        </el-form-item>
        <el-form-item label="任务模板" v-if="withTemplate === '1'">
          <el-select
            v-model="taskForm.inspectionId"
            placeholder="选择"
            @change="selectTaskModuleChange"
            :disabled="withTemplate === '0'"
          >
            <el-option
              v-for="item in taskModels"
              :key="item.inspectionId"
              :label="item.inspectionName"
              :value="item.inspectionId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择路线" prop="inspectionMapId" v-else>
          <el-select
            v-model="templateForm.inspectionMapId"
            placeholder="选择"
            @change="selectTemplateMap(templateForm.inspectionMapId)"
          >
            <el-option v-for="item in AllMap" :key="item.mapId" :label="item.mapName" :value="item.mapId" />
          </el-select>
        </el-form-item>
        <el-form-item label="任务名称">
          <el-input v-model="taskForm.inspectionWorkName"></el-input>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            time-format="HH:mm"
            v-model="taskForm.inspectionStartTime"
            placeholder="开始时间"
            arrow-control="true"
            :suffix-icon="Calendar"
            :default-time="now"
            :disabled-date="disabledDate"
            :disabled-hours="disabledHours"
            :disabled-minutes="disabledMinutes"
            :show-now="false"
          />
        </el-form-item>
        <el-form-item label="任务时限">
          <el-input-number v-model="taskForm.inspectionLimitTime" controls-position="right" :min="1"></el-input-number>
          <span>&nbsp;小时</span>
        </el-form-item>
        <!--        <el-form-item label="负责班组">-->
        <!--          <el-input v-model="classData.className" disabled></el-input>-->
        <!--        </el-form-item>-->
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="one = false">取消</el-button>
          <el-button type="primary" @click="Next"> 下一步 </el-button>
        </span>
      </template>
    </el-dialog>
    <!--任务模板基本信息-->
    <el-dialog v-model="showTemplateDialog" title="任务创建" width="70%">
      <el-table :data="templateForm.inspectionDatas" style="width: 100%" border>
        <el-table-column prop="mapDetailName" label="路线点位名"></el-table-column>
        <el-table-column prop="unitName" label="机组"></el-table-column>
        <el-table-column prop="inspectionDataName" label="点位任务名">
          <template #default="scope">
            <el-input v-model="scope.row.inspectionDataName" placeholder="点位任务名"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="inspectionDataDesc" label="任务描述">
          <template #default="scope">
            <el-input v-model="scope.row.inspectionDataDesc" placeholder="点位任务描述"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="inspectionGroupId" label="数据组">
          <template #default="scope">
            <el-select v-model="scope.row.inspectionGroupId" placeholder="选择数据组">
              <el-option
                v-for="item in datas"
                :key="item.inspectionGroupId"
                :label="item.inspectionGroupName"
                :value="item.inspectionGroupId"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="执行班组">
          <template #default="scope">
            <el-select
              v-model="scope.row.inspectionDetailClass"
              placeholder="选择班组"
              @change="scope.row.inspectionDetailUser = null"
            >
              <el-option
                v-for="clas in workerListByClass"
                :key="clas.classId"
                :label="clas.className"
                :value="clas.classId"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="负责人">
          <template #default="scope">
            <el-select
              v-model="scope.row.inspectionDetailUser"
              placeholder="选择组员"
              :disabled="!scope.row.inspectionDetailClass"
            >
              <el-option
                v-for="item in getWorkerList(scope.row.inspectionDetailClass)"
                :key="item.userId"
                :label="item.realName"
                :value="item.userId"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            @click="
              showTemplateDialog = false;
              one = true;
            "
            >上一步</el-button>
          <el-button type="primary" @click="Next2"> 下一步 </el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="two" title="任务创建" width="70%">
      <div>
        <el-table :data="taskPoint" class="custom-table" style="width: 100%" border>
          <el-table-column label="点位名" prop="mapDetailDesc"></el-table-column>
          <el-table-column label="任务名" prop="inspectionDataName"></el-table-column>
          <el-table-column label="任务描述" prop="inspectionDataDesc"></el-table-column>
          <el-table-column label="执行班组">
            <template #default="scope">
              <el-select
                v-model="scope.row.inspectionDetailClass"
                placeholder="选择班组"
                @change="scope.row.inspectionDetailUser = null"
              >
                <el-option
                  v-for="clas in workerListByClass"
                  :key="clas.classId"
                  :label="clas.className"
                  :value="clas.classId"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="负责人">
            <template #default="scope">
              <el-select
                v-model="scope.row.inspectionDetailUser"
                placeholder="选择组员"
                :disabled="!scope.row.inspectionDetailClass"
              >
                <el-option
                  v-for="item in getWorkerList(scope.row.inspectionDetailClass)"
                  :key="item.userId"
                  :label="item.realName"
                  :value="item.userId"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
        <!-- <el-button @click="addRow1" type="primary">添加行</el-button> -->
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            @click="
              two = false;
              one = true;
            "
            >上一步</el-button>
          <el-button type="primary" @click="Next2"> 下一步 </el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="add_task_commit" title="任务创建" width="70%">
      <!--最终展示模式-->
      <el-descriptions title="任务详情" direction="vertical" :column="4" border>
        <el-descriptions-item label="任务名称">{{ taskForm.inspectionWorkName }}</el-descriptions-item>
        <el-descriptions-item v-if="withTemplate === '1'" label="巡检线路">{{
          getMapInfo(inspection.inspectionMapId)
        }}</el-descriptions-item>
        <el-descriptions-item v-else label="巡检线路">{{ getMapInfo(templateForm.inspectionMapId) }}</el-descriptions-item>
        <el-descriptions-item label="巡检开始时间">{{ taskForm.inspectionStartTime }}</el-descriptions-item>
        <el-descriptions-item label="巡检时限">{{ taskForm.inspectionLimitTime }}小时</el-descriptions-item>
      </el-descriptions>
      <br />
      <el-descriptions title="点位任务详情" direction="vertical" :column="1" border> </el-descriptions>
      <el-table :data="inspectionDetails" class="custom-table" style="width: 100%" v-if="withTemplate === '1'">
        <el-table-column label="序号" type="index" width="100"></el-table-column>
        <el-table-column label="任务名">
          <template #default="scope">
            <text>{{ scope.row.inspectionData.inspectionDataName }}</text>
          </template>
        </el-table-column>
        <el-table-column label="点位名">
          <template #default="scope">
            <text>{{ scope.row.mapDetailVO.mapDetailDesc }}</text>
          </template>
        </el-table-column>
        <el-table-column label="机组">
          <template #default="scope">
            <text>{{ scope.row.mapDetailVO.unitName }}</text>
          </template>
        </el-table-column>
        <el-table-column label="数据组">
          <template #default="scope">
            <text>{{ getDataInfo(scope.row.inspectionData.inspectionGroupId) }}</text>
          </template>
        </el-table-column>
        <el-table-column label="班组">
          <template #default="scope">
            <text>{{
              getClassInfo(
                taskPoint.find(point => point.inspectionDataId === scope.row.inspectionData.inspectionDataId)
                  .inspectionDetailClass
              )
            }}</text>
          </template>
        </el-table-column>
        <el-table-column label="负责人">
          <template #default="scope">
            <text>{{
              getUserInfo(
                taskPoint.find(point => point.inspectionDataId === scope.row.inspectionData.inspectionDataId).inspectionDetailUser
              )
            }}</text>
          </template>
        </el-table-column>
      </el-table>
      <el-table :data="templateForm.inspectionDatas" class="custom-table" style="width: 100%" v-else>
        <el-table-column label="序号" type="index" width="100"></el-table-column>
        <el-table-column label="路线点位名">
          <template #default="scope">
            <text>{{ scope.row.mapDetailName }}</text>
          </template>
        </el-table-column>
        <el-table-column label="点位任务名" prop="inspectionDataName"></el-table-column>
        <el-table-column label="机组">
          <template #default="scope">
            <text>{{ scope.row.unitName }}</text>
          </template>
        </el-table-column>
        <el-table-column label="数据组">
          <template #default="scope">
            <text>{{ getDataInfo(scope.row.inspectionGroupId) }}</text>
          </template>
        </el-table-column>
        <el-table-column label="班组">
          <template #default="scope">
            <text>{{ getClassInfo(scope.row.inspectionDetailClass) }}</text>
          </template>
        </el-table-column>
        <el-table-column label="负责人">
          <template #default="scope">
            <text>{{ getUserInfo(scope.row.inspectionDetailUser) }}</text>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="lastStep2">上一步</el-button>
          <el-button type="primary" @click="addTask" :loading="addTaskLoadingFlag"> 创建 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="js">
import { onMounted, reactive, ref, watch } from "vue";
import { Calendar, Warning } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import request from "@/api/request.js";
import http from "@/utils/http.js";
import { useUserStore } from "@/stores/modules/user.ts";
import { getDataService } from "@/api/inspection/datas.js";
import inspectionValue from "@/views/inspect/dataGroup/inspectionValue/index.vue";
const currentUserId = useUserStore().userInfo.userId;

//控制变量
const withTemplate = ref("1");
const showValueDetail = ref(false);
const inspectionValues = ref([]);
const show_task = ref(false);
const edit_task = ref(false);
const edit_details_dialog = ref(false);
const now = new Date();
now.setSeconds(0); //设定开始时间秒数为0
now.setMinutes(now.getMinutes() + 5);
const disabledDate = time => {
  // 禁用今天之前的日期
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  return time.getTime() < today.getTime();
};
const disabledHours = () => {
  const hours = [];
  if (taskForm.value.inspectionStartTime) {
    const selectedDate = new Date(taskForm.value.inspectionStartTime);
    if (selectedDate.toDateString() === now.toDateString()) {
      const currentHour = now.getHours();
      for (let i = 0; i < currentHour; i++) {
        hours.push(i);
      }
    }
  }
  return hours;
};
const disabledMinutes = hour => {
  const minutes = [];
  if (taskForm.value.inspectionStartTime) {
    const selectedDate = new Date(taskForm.value.inspectionStartTime);
    if (selectedDate.toDateString() === now.toDateString() && hour === now.getHours()) {
      const currentMinute = now.getMinutes();
      for (let i = 0; i < currentMinute; i++) {
        minutes.push(i);
      }
    }
  }
  return minutes;
};
const showTemplateDialog = ref(false);
//三级
const one = ref(false);
const two = ref(false);
//const three = ref(false);
const add_task_commit = ref(false);
const addTaskLoadingFlag = ref(false);
//用户搜索输入
const searchClassId = ref();
const searchMemberId = ref();
const searchMapId = ref();
const searchTime = ref("");
const handleClear = () => {
  searchMemberId.value = null;
};
//分页
const currentPage = ref(1); // 当前页码
const pageSize = ref(10); // 每页显示的任务数
const totalItems = ref(0); // 总任务数
const paginatedTasks = ref([]); // 当前页显示的任务列表
//巡检任务点位详情
const taskDetails = ref([]);

//任务模板
const taskModels = ref([]);
//当前任务模板
const inspection = ref({
  inspectionDate: "", //巡检任务模版创建时间
  inspectionId: 0, //巡检任务模版ID
  inspectionClassId: 0, //巡检模版任务所属班组
  inspectionMapId: 0, //巡检模版任务的地图ID
  inspectionName: "", //巡检模版任务名字
  inspectionUserId: 0 //巡检模版任务创建者ID
});

//任务模板点位信息
const inspectionDetails = ref([]);

const taskPoint = ref([]);

const task = ref({});

const tasks = ref([]);

//分配任务提交表单
const taskForm = ref({
  inspectionLimitTime: null,
  inspectionStartTime: "",
  inspectionWorkName: "",
  inspectionId: null,
  inspectionWorkNumber: 0,
  inspectionWorkStatus: 0,
  inspectionDetails: []
});
const initialTaskForm = ref({ ...taskForm.value }); // 深拷贝初始状态
//任务模板添加表单
const templateForm = ref({
  inspectionUserId: currentUserId,
  inspectionClassId: null,
  inspectionName: "",
  inspectionMapId: "",
  inspectionDatas: []
});
const AllClass = ref([]);
const classMembers = ref([]);
const workerListByClass = ref([]);
const datas = ref([]);
const AllMap = ref([]);
//编辑表单
const editForm = ref({});
const editDetails = ref([]);
const editDetails2 = ref([]);
//监听数据变化
watch(tasks, newTasks => {
  totalItems.value = newTasks.length;
  updatePaginatedTasks();
});

//狗子函数
onMounted(async () => {
  console.log("当前userid：" + currentUserId);
  getAllTask(currentUserId);
  getAllMap();
  totalItems.value = tasks.value.length;
  updatePaginatedTasks(); //初始化分页
  getAllClass();
  getAllTaskModule();
  await getDatas();
  await getWorkerByClass();
});
const showValue = row => {
  showValueDetail.value = true;
  inspectionValues.value = row.inspectionValueVos;
};
//任务编辑
const showEditTask = async row => {
  editForm.value.inspectionWorkId = row.inspectionWork.inspectionWorkId;
  editForm.value.OldInspectionWorkName = row.inspectionWork.inspectionWorkName;
  editForm.value.inspectionWorkName = row.inspectionWork.inspectionWorkName;
  editForm.value.inspectionStartTime = formatDate2(row.inspectionWork.inspectionStartTime);
  editForm.value.inspectionLimitTime = row.inspectionWork.inspectionLimitTime;
  await pushDetailPointToEditDetails();
  edit_task.value = true;
};
const pushDetailPointToEditDetails = async () => {
  editDetails.value = [];
  await request.get("/api-self/inspection/detail/" + editForm.value.inspectionWorkId + "/" + currentUserId).then(res => {
    const data = res.data;
    if (data.code === 0) {
      data.data.forEach(detail => {
        const newDetail = {};
        newDetail["inspectionDetailId"] = detail.inspectionDetailId;
        newDetail["inspectionDetailClass"] = detail.inspectionDetailClassId;
        newDetail["inspectionDetailUser"] = detail.inspectionDetailUserId;
        newDetail["inspectionDataName"] = detail.inspectionDataName;
        newDetail["inspectionDataDesc"] = detail.inspectionDataDesc;
        newDetail["mapDetailDesc"] = detail.mapDetailDesc;
        newDetail["inspectionGroupId"] = detail.inspectionGroupId;
        editDetails.value.push(newDetail);
      });
      editDetails.value.push();
    } else {
      ElMessage.error("获取巡检任务详情失败：" + data.message);
    }
  });
};
const confirmEdit = () => {
  let flag = false;
  for (const key in editForm.value) {
    if (!editForm.value[key]) flag = true;
  }
  if (flag) {
    ElMessage.warning("请填写完整信息");
    return;
  }
  ElMessageBox.confirm("确定修改吗?", "警告", {
    confirmButtonText: "修改",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    request.put("/api-self/inspection/inspectionWork", editForm.value).then(res => {
      const data = res.data;
      if (data.code === 0) {
        ElMessage.success("修改成功");
        getAllTask(currentUserId);
        updatePaginatedTasks();
      } else {
        ElMessage.error("修改失败：" + data.message);
      }
    });
  });
};
const showEditDetail = () => {
  edit_details_dialog.value = true;
  editDetails2.value = JSON.parse(JSON.stringify(editDetails.value));
};
const ConfirmEditDetail = () => {
  request.put("/api-self/inspection/details", { newDetails: editDetails2.value }).then(res => {
    const data = res.data;
    if (data.code === 0) {
      ElMessage.success("修改成功");
      pushDetailPointToEditDetails();
      edit_details_dialog.value = false;
    } else {
      ElMessage.error("修改失败：" + data.message);
    }
  });
};
//获取所有数据组
const getDatas = async () => {
  let result = await getDataService();
  datas.value = result.data.data;
};
//获取巡检任务详情
const getTaskDetails = inspectionWorkId => {
  request.get("/api-self/inspection/detail/" + inspectionWorkId + "/" + currentUserId).then(res => {
    const data = res.data;
    if (data.code === 0) {
      taskDetails.value = data.data;
    } else {
      ElMessage.error("获取巡检任务详情失败：" + data.message);
    }
  });
};
//任务点位状态格式化
const formatInspectionDetailStatus = status => {
  let statusStr = "未知状态";
  switch (status) {
    case 0:
      statusStr = "处理中";
      break;
    case 1:
      statusStr = "已超时";
      break;
    case 2:
      statusStr = "已完成";
      break;
    case 3:
      statusStr = "已取消";
      break;
    case 4:
      statusStr = "已反馈";
      break;
    case 5:
      statusStr = "未反馈";
      break;
    case 6:
      statusStr = "未开始";
      break;
  }
  return statusStr;
};
const formatInspectionDetailTagType = status => {
  let statusStr = "primary";
  switch (status) {
    case 0:
      statusStr = "primary";
      break;
    case 1:
      statusStr = "danger";
      break;
    case 2:
      statusStr = "success";
      break;
    case 3:
      statusStr = "warning";
      break;
    case 4:
      statusStr = "danger";
      break;
    case 5:
      statusStr = "info";
      break;
    case 6:
      statusStr = "info";
      break;
  }
  return statusStr;
};
const formatInspectionWorkStatus = status => {
  let statusStr = "未知状态";
  switch (status) {
    case 0:
      statusStr = "处理中";
      break;
    case 1:
      statusStr = "已超时";
      break;
    case 2:
      statusStr = "已完成";
      break;
    case 3:
      statusStr = "已取消";
      break;
    case 4:
      statusStr = "未开始";
      break;
  }
  return statusStr;
};
const formatInspectionWorkTagType = status => {
  let statusStr = "primary";
  switch (status) {
    case 0:
      statusStr = "primary";
      break;
    case 1:
      statusStr = "danger";
      break;
    case 2:
      statusStr = "success";
      break;
    case 3:
      statusStr = "warning";
      break;
    case 4:
      statusStr = "info";
      break;
  }
  return statusStr;
};
//时间格式化
const formatDate = date => {
  const d = new Date(date);

  const year = d.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, "0");
  const day = String(d.getDate()).padStart(2, "0");

  const hours = String(d.getHours()).padStart(2, "0");
  const minutes = String(d.getMinutes()).padStart(2, "0");
  const seconds = String(d.getSeconds()).padStart(2, "0");

  return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
};
const formatDate2 = dateString => {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
//搜索
const searchTask = () => {
  console.log("search");
  const searchFrom = {
    startTime: searchTime.value[0] ? searchTime.value[0] : "2000-1-1",
    endTime: searchTime.value[1] ? searchTime.value[1] : "2099-1-1",
    searchUserId: searchMemberId.value ? searchMemberId.value : -1,
    mapId: searchMapId.value ? searchMapId.value : -1
  };
  console.log(searchFrom);
  request.post("/api-self/inspection/search/noBatch/" + currentUserId, searchFrom).then(res => {
    const data = res.data;
    if (data.code === 0) {
      ElMessage.success("搜索成功");
      currentPage.value = 1;
      tasks.value = data.data;
      updatePaginatedTasks();
    } else {
      ElMessage.error("未搜索到相关信息：" + data.message);
    }
  });
};
//查找指定用户名字
// 创建一个响应式对象来存储用户信息
const userCache = reactive({});
const getUserInfo = userId => {
  // 检查缓存，避免重复请求
  if (!userCache[userId]) {
    // 初始设为 '加载中...'，以处理异步过程
    userCache[userId] = "加载中...";

    http
      .get("/users/account/getUserInfo", { params: { userId: userId } })
      .then(res => {
        const data = res.data;
        if (data.code === 0) {
          userCache[userId] = data.data.realName;
        } else {
          userCache[userId] = "未知用户";
        }
      })
      .catch(() => {
        userCache[userId] = "请求失败";
      });
  }
  // 立即返回缓存值，初次时可能是 "加载中..."
  return userCache[userId];
};
//查找指定班组名字
// 创建一个响应式对象来存储用户信息
const classCache = reactive({});
const getClassInfo = classId => {
  // 检查缓存，避免重复请求
  if (!classCache[classId]) {
    // 初始设为 '加载中...'，以处理异步过程
    classCache[classId] = "加载中...";
    http
      .get("/users/class/getClass/" + classId)
      .then(res => {
        const data = res.data;
        if (data.code === 0) {
          classCache[classId] = data.data.className;
        } else {
          classCache[classId] = "未知班组";
        }
      })
      .catch(() => {
        classCache[classId] = "请求失败";
      });
  }
  return classCache[classId];
};
//查找指定数据组名字
// 创建一个响应式对象来存储用户信息
const groupCache = reactive({});
const getDataInfo = groupId => {
  if (!groupCache[groupId]) {
    // 初始设为 '加载中...'，以处理异步过程
    groupCache[groupId] = "加载中...";
    http
      .get("/inspection/data/" + groupId)
      .then(res => {
        const data = res.data;
        if (data.code === 0) {
          let dataStr = "";
          data.data.forEach(data => {
            dataStr += data.attribute + "(" + data.perUnit + ");";
          });
          groupCache[groupId] = dataStr;
        } else {
          groupCache[groupId] = "未知数据组";
        }
      })
      .catch(() => {
        groupCache[groupId] = "请求失败";
      });
  }
  return groupCache[groupId];
};
//查找指定路线名称
// 创建一个响应式对象来存储路线信息
const mapCache = reactive({});
const getMapInfo = mapId => {
  // 检查缓存，避免重复请求
  if (!mapCache[mapId]) {
    // 初始设为 '加载中...'，以处理异步过程
    mapCache[mapId] = "加载中...";
    mapCache[mapId] = AllMap.value.find(map => map.mapId === mapId).mapName;
  }
  return mapCache[mapId];
};
//获取所有路线
const getAllMap = () => {
  request.get("/api-self/inspection/map/nopage").then(res => {
    const data = res.data;
    if (data.code === 0) {
      AllMap.value = data.data;
      AllMap.value = AllMap.value.filter(item => item.mapId !== -1 && item.mapId !== 1);
    } else {
      ElMessage.error("获取路线失败：" + data.message);
    }
  });
};
//分页逻辑
const updatePaginatedTasks = () => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  paginatedTasks.value = tasks.value.slice(start, end);
};
const handleSizeChange = newSize => {
  pageSize.value = newSize;
  currentPage.value = 1; // 重置到第一页
  updatePaginatedTasks(); // 更新当前页的数据
};

const handleCurrentChange = newPage => {
  currentPage.value = newPage;
  updatePaginatedTasks(); // 更新当前页的数据
};
//获取所有任务
const getAllTask = userId => {
  request.get("/api-self/inspection/" + userId).then(res => {
    const data = res.data;
    if (data.code === 0) {
      tasks.value = data.data;
    } else {
      ElMessage.error("获取所有分配任务失败：" + data.message);
    }
  });
};

//获取指定模板详细信息
const getTaskModuleData = async inspectionId => {
  inspection.value = taskModels.value.find(module => module.inspectionId === inspectionId);
  await request.get("/api-self/inspection/template/detail/" + inspectionId + "/" + inspection.value.inspectionMapId).then(res => {
    const data = res.data;
    if (data.code === 0) {
      inspectionDetails.value = data.data;
    } else {
      ElMessage.error("获取模板任务点位信息失败：" + data.message);
    }
  });
};
//获取新建模板详细信息
const fetchTemplateData = async inspectionId => {
  await request.get("/api-self/inspection/template/detail/" + inspectionId + "/" + inspection.value.inspectionMapId).then(res => {
    const data = res.data;
    if (data.code === 0) {
      inspectionDetails.value = data.data;
    } else {
      ElMessage.error("获取模板任务点位信息失败：" + data.message);
    }
  });
};
//分配任务时选择模板响应函数
const selectTaskModuleChange = () => {
  getTaskModuleData(taskForm.value.inspectionId);
  // getClassData(inspection.value.inspectionClassId);
};
//为点位选择负责班组响应函数
const selectPointClassChange = classId => {
  if (classId == null) return;
  getClassMember(classId);
};
//新建模板时选择路线响应函数
const selectTemplateMap = async mapId => {
  templateForm.value.inspectionDatas = [];
  await request.get("/api-self/inspection/map/" + mapId).then(res => {
    const data = res.data;
    if (data.code === 0) {
      data.data.forEach(marker => {
        templateForm.value.inspectionDatas.push({
          mapDetailName: marker.mapDetailDesc,
          mapDetailId: marker.mapDetailId,
          inspectionDataName: "",
          inspectionDataDesc: "",
          inspectionGroupId: null,
          unitName: marker.unitName,
          inspectionDetailClass: null,
          inspectionDetailUser: null
        });
      });
    }
  });
};
//获取特定班组信息、成员
const getClassMember = classId => {
  request.get("/api-self/users/class/getClassMembers", { params: { classId: classId } }).then(res => {
    const data = res.data;
    if (data.code === 0) {
      classMembers.value = data.data;
    }
  });
};
const getWorkerByClass = async () => {
  await request.get("/api-self/users/account/selectByClass").then(res => {
    const data = res.data;
    if (data.code === 0) {
      workerListByClass.value = data.data;
    }
  });
};
const getWorkerList = classId => {
  const clas = workerListByClass.value.find(x => x.classId === classId);
  let workerList;
  if (clas) {
    workerList = clas.workerList;
  } else {
    workerList = [];
  }
  return workerList;
};
//获取所有班组
const getAllClass = () => {
  request.get("/api-self/users/class/getClasses").then(res => {
    const data = res.data;
    if (data.code === 0) {
      AllClass.value = data.data;
    } else {
      ElMessage.error("获取所有班组信息失败");
    }
  });
};
//获取所有任务模板
const getAllTaskModule = () => {
  request.get("/api-self/inspection/template").then(res => {
    const data = res.data;
    if (data.code === 0) {
      taskModels.value = data.data;
    } else {
      ElMessage.error("获取任务模板失败");
    }
  });
};
//将模板详细点位相关数据赋值给新建表单
const initTaskPoints = () => {
  inspectionDetails.value.forEach(detail => {
    let point = {
      inspectionDetailClass: null,
      inspectionDetailStatus: null,
      inspectionDetailUser: null,
      inspectionDataId: null,
      inspectionDetailNote: null
    };
    point.inspectionDataId = detail.inspectionData.inspectionDataId;
    point.inspectionDataName = detail.inspectionData.inspectionDataName;
    point.mapDetailDesc = detail.mapDetailVO.mapDetailDesc;
    point.inspectionDataDesc = detail.inspectionData.inspectionDataDesc;
    point.inspectionDetailStatus = 6; //默认未开始
    taskPoint.value.push(point);
  });
};
//删除任务接口调用
const deleteTask = inspectionWorkId => {
  request.delete("/api-self/inspection/" + inspectionWorkId).then(res => {
    const data = res.data;
    if (data.code === 0) {
      ElMessage.success("删除成功");
      getAllTask(currentUserId);
      updatePaginatedTasks();
    } else {
      ElMessage.error("删除失败：" + data.message);
    }
  });
};
const addTask = async () => {
  addTaskLoadingFlag.value = true;
  if (withTemplate.value === "1") {
    addTaskWithTemplate();
  } else {
    await addTemplate();
    await fetchTemplateData(inspection.value.inspectionId);
    mapInspectionDataId();
    addTaskWithTemplate();
  }
};
const addTaskWithTemplate = () => {
  if (withTemplate.value === "1") {
    taskForm.value.inspectionDetails = taskPoint.value;
    taskForm.value.inspectionWorkNumber = taskPoint.value.length;
  } else {
    taskForm.value.inspectionDetails = templateForm.value.inspectionDatas;
    taskForm.value.inspectionWorkNumber = templateForm.value.inspectionDatas.length;
    taskForm.value.inspectionId = inspection.value.inspectionId;
  }
  taskForm.value.inspectionWorkStatus = 4; //默认未开始状态
  taskForm.value.isBatch = 0;
  taskForm.value.batchStartTime = taskForm.value.inspectionStartTime;
  taskForm.value.batchEndTime = taskForm.value.inspectionStartTime;
  console.log(taskForm.value);
  request
    .post("/api-self/inspection/distribute", taskForm.value)
    .then(res => {
      const data = res.data;
      if (data.code === 0) {
        ElMessage.success("任务分配成功");
        add_task_commit.value = false;
        getAllTask(currentUserId);
        updatePaginatedTasks();
        resetTaskForm();
      } else {
        ElMessage.error("任务分配失败：" + data.message);
      }
      addTaskLoadingFlag.value = false;
    })
    .catch(() => {
      ElMessage.error("服务异常");
      addTaskLoadingFlag.value = false;
    });
};
//在不使用模板分配任务时，首先先新建模板
const addTemplate = async () => {
  templateForm.value.inspectionName = taskForm.value.inspectionWorkName + "模板";
  await request
    .post("/api-self/inspection/template", templateForm.value)
    .then(res => {
      const data = res.data;
      if (data.code === 0) {
        inspection.value = data.data;
      } else {
        ElMessage.error("创建任务模板失败：" + data.message);
        addTaskLoadingFlag.value = false;
      }
    })
    .catch(() => {
      ElMessage.error("服务异常");
      addTaskLoadingFlag.value = false;
    });
};
const mapInspectionDataId = () => {
  templateForm.value.inspectionDatas.forEach(data => {
    data.inspectionDataId = inspectionDetails.value.find(
      detail => detail.mapDetailVO.mapDetailId === data.mapDetailId
    ).inspectionData.inspectionDataId;
  });
};
const showTask = row => {
  show_task.value = true;
  task.value = tasks.value.find(task => task.inspectionWork.inspectionWorkId === row.inspectionWork.inspectionWorkId);
  getTaskDetails(task.value.inspectionWork.inspectionWorkId);
  console.log(row);
};
const delTask = async row => {
  ElMessageBox.confirm("确认删除该任务?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    deleteTask(row.inspectionWork.inspectionWorkId);
  });
};
const resetTaskForm = () => {
  taskForm.value = { ...initialTaskForm.value }; // 重置为初始状态
};
const Next = () => {
  if (withTemplate.value === "1") {
    const inspectionId = taskForm.value.inspectionId;
    const inspectionWorkName = taskForm.value.inspectionWorkName;
    const inspectionStartTime = taskForm.value.inspectionStartTime;
    const inspectionLimitTime = taskForm.value.inspectionLimitTime;
    taskPoint.value = [];
    initTaskPoints();
    if (inspectionId && inspectionWorkName && inspectionStartTime && inspectionLimitTime) {
      one.value = false;
      two.value = true;
    } else {
      ElMessage.warning("请填写完整信息");
    }
  } else {
    const mapId = templateForm.value.inspectionMapId;
    const inspectionWorkName = taskForm.value.inspectionWorkName;
    const inspectionStartTime = taskForm.value.inspectionStartTime;
    const inspectionLimitTime = taskForm.value.inspectionLimitTime;
    if (mapId && inspectionWorkName && inspectionStartTime && inspectionLimitTime) {
      one.value = false;
      showTemplateDialog.value = true;
    } else {
      ElMessage.warning("请填写完整信息");
    }
  }
};
const Next2 = () => {
  if (withTemplate.value === "1") {
    let flag = true;
    taskPoint.value.forEach(point => {
      if (!(point.inspectionDetailClass && point.inspectionDetailUser)) flag = false;
    });
    if (flag) {
      two.value = false;
      add_task_commit.value = true;
    } else {
      ElMessage.warning("请填写完整信息");
    }
  } else {
    let flag = true;
    templateForm.value.inspectionDatas.forEach(data => {
      if (
        !(
          data.inspectionDataName &&
          data.inspectionDataDesc &&
          data.inspectionGroupId &&
          data.inspectionDetailClass &&
          data.inspectionDetailUser
        )
      )
        flag = false;
    });
    if (flag) {
      showTemplateDialog.value = false;
      add_task_commit.value = true;
    } else {
      ElMessage.warning("请填写完整信息");
    }
  }
};
const lastStep2 = () => {
  if (withTemplate.value === "1") {
    two.value = true;
    add_task_commit.value = false;
  } else {
    showTemplateDialog.value = true;
    add_task_commit.value = false;
  }
};
const selected = () => {
  return true;
};
</script>

<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  font-size: 32px;
  font-weight: 600;
  color: #6b778c;
}
.demo-tabs {
  margin-top: -20px;
}
.topadd {
  position: absolute;
  top: 73px;
  right: 40px;
}
.page-container {
  box-sizing: border-box;
  min-height: 100%;
}
.add {
  position: absolute;
  top: 80%;
  right: 3%;
  float: left;
  width: 60px;
  height: 60px;
  font-size: 50px;
  font-weight: 600;
  border-radius: 50%;
}
.inneradd {
  position: absolute;
  top: 55px;
  right: 30px;
  float: left;
  font-weight: 900;
}
.avatar-uploader .avatar {
  display: block;
  width: 178px;
  height: 178px;
}
.avatar-uploader .el-upload {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
  width: 178px;
  height: 178px;
  font-size: 28px;
  color: #060707;
  text-align: center;
}
.Product-image {
  width: auto; /* 图片宽度自适应 */
  max-width: 100%; /* 图片最大宽度为其容器的100% */
  height: auto; /* 图片高度自适应 */
  max-height: 100%; /* 图片最大高度为其容器的100% */
}
.custom-table :deep(.el-table__header-wrapper thead tr th) {
  color: #000000;
  text-align: center;
  background-color: #fafafa;
}
.custom-table :deep(.el-table__body-wrapper tbody tr td) {
  text-align: center; /* 单元格内容居中 */
}
.el-button {
  border-radius: 6px;
}
:deep(.my-label) {
  width: 100px !important;
}
</style>
